<template>
	<view :style="[AppSkinVar]" class="bg-white e-p-l-40 e-p-r-40 e-p-b-60 e-p-t-20 e-radius-20 overflow-hidd">
		<view class="h-100  e-flex e-m-b-20">
			<image class="img-36 e-m-r-30" src="../static/public/phone.png"></image>
			<text>{{userInfo.phone}}</text>
		</view>
		<view class=" h-100 e-m-b-20 e-flex">
			<image class="img-36  e-m-r-30" src="../static/public/shield.png"></image>
			<e-input type="number" v-model="formData.validCode" border="none" :placeholder="toI18('请输入手机验证码')" />
			<e-code-button ref="eCodeRef"  :start-text="$t('public.获取验证码')"
				:change-text="$t('public.X秒重新获取')" :end-text="$t('public.重新获取')" size="small" type="primary" shape="circle"
				 @click="getCode"></e-code-button>
		</view>
		<view class=" h-100 e-m-b-20 e-flex">
			<image class="img-36  e-m-r-30" src="../static/public/password.png"></image>
			<e-input type="number" maxlength="6" v-model="formData.onePassword" border="none" password
				:placeholder="toI18('6位纯数字')" />
		</view>
		<view class=" h-100 e-m-b-40 e-flex">
			<image class="img-36  e-m-r-30" src="../static/public/password.png"></image>
			<e-input type="number" maxlength="6" v-model="formData.twoPassword" border="none" password
				:placeholder="toI18('请重新输入密码')" />
		</view>
		<view class="sub-btn bg-primary e-flex-xy-center" :class="{ 'is-ok': !isOk }"
			@tap="submit">
			<text>{{ $t('common.确认') }}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive,watch } from 'vue'
	import { updatePayword, postPasswordSms } from '@/common/request/api'
	import {
		useI18n,
		useCurrentInstance
	} from '@/common/hooks'
	import type {
		CodeInstance
	} from '@/uni_modules/endless-ui/typing'
	import {throttle} from '@/common/utils'
	import { useUser } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	

	
	const ctx = useCurrentInstance()
	
	const toI18 = useI18n('setting')
	const userStore = useUser()
	const {userInfo} = storeToRefs(userStore)
	
	const isOk = ref(false)
	
	const formData = reactive<Record<string,string>>({
		validCode: '',
		onePassword: '',
		twoPassword: ''
	})
	
	watch(formData,(newVal) => {
		for (let i in newVal) {
			if (!newVal[i]) {
				isOk.value = false
				return
			} else {
				isOk.value = true
			}
		}
	},{
		deep:true
	})
	
	const bandingTips = () => {
		ctx.$showModal({
			content: ctx.$t('public.绑定手机号码提示'),
			success: res => {
				if (res.confirm) {
					ctx.$goTo('/pages/public/account/binding')
				}
			}
		})
	}
	
	watch(userInfo,(newVal) => {
		if (!newVal.phone&&newVal.userId) {
			// 如果是邮箱注册，没有绑定手机号。这里要先绑定
			bandingTips()
		}
	},{
		immediate:true
	})
	
	const eCodeRef = ref<CodeInstance>()
	
	const getCode = () => {
		if (!userInfo.value.phone) {
			bandingTips()
			return
		}
		postPasswordSms(userInfo.value.phone).then(res => {
			eCodeRef.value?.start()
			
		})
	}
	
	const submit =throttle(function () {
		if (!isOk.value) return
		if (formData.twoPassword !== formData.onePassword) {
			ctx.$toastApp(ctx.$t('public.两次密码不一致'))
			return
		}
		const reg = /^\d{6}$/
		if (!reg.test(formData.onePassword)) {
			ctx.$toastApp(toI18('密码不规范'))
			return
		}
		const params = {
			username: userInfo.value.phone,
			paywode: formData.onePassword,
			validcode: formData.validCode
		}
		updatePayword(params).then(res => {
			if (res.code == 200) {
				userStore.getUserInfo()
				const title = toI18('修改成功')
				ctx.$toast(title, 'success')
				ctx.$back()
			}
		})
	},1000) 
	
	onLoad((opt) => {
		if (opt?.type) {
			uni.setNavigationBarTitle({
				title: toI18('设置支付密码')
			})
		}
	})
</script>
<style>
	page{
		padding:20rpx
	}
</style>
<style lang="scss" scoped>
	:deep(.e-button--small){
		padding: 0 40rpx;
	}
	.h-100 {
		height: 100rpx;
	}

	.w-140 {
		width: 140rpx;
	}

	.code-btn {
		height: 62rpx;
		line-height: 62rpx;
		letter-spacing: 2rpx;
		border-radius: 31px;
	}

	.sub-btn {
		height: 100rpx;
		line-height: 100rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
		border-radius: 45rpx;
		margin: auto;
	}
</style>
